<template>
  <div class="app-container">
    <!-- 条件查询区域开始 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <!-- 任务名称 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobRecord.jobName')" prop="jobName">
              <jmash-select
                v-model="queryParams.jobName"
                :data="Dict.jobNameBizDict.values"
                :placeholder="$t('jobRecord.jobNameRequired')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 任务状态 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobRecord.state')" prop="state">
              <jmash-select
                v-model="queryParams.state"
                :data="Dict.recordStateDict.values"
                :placeholder="$t('jobRecord.stateRequired')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 执行时间 -->
          <el-col :span="6">
            <el-form-item :label="$t('jobRecord.startDate')" prop="startDate">
              <el-date-picker
                v-model="queryParams.startDate"
                type="datetime"
                :placeholder="$t('jobRecord.startDateRequired')"
                format="YYYY-MM-DD HH:mm"
                @change="dateEvents"
              />
            </el-form-item>
          </el-col>
          <!-- 查询重置 按钮 -->
          <el-col :span="6">
            <el-form-item class="search-btn">
              <el-button type="primary" @click="tableHooks.handleQuery()">
                {{ $t("common.search") }}
              </el-button>
              <el-button @click="tableHooks.resetQuery()">{{
                $t("common.reset")
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="clear"></div>
    </div>
    <!-- 条件查询区域结束 -->
    <el-card shadow="never" class="table-container">
      <!-- 按钮开始 -->
      <template #header>
        <!-- 按钮开始 -->
        <el-row>
          <el-col :span="24" class="container-float">
            <!-- 固定列表 -->
            <jmash-column-select
              v-model="tableLabel"
              label-name="jobs/job-record"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->

      <!-- 表格开始 -->
      <jmash-table
        ref="multipleTableRef"
        row-key="recordId"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
        @sort-change="handleSort"
      >
        <!-- 任务名称 -->
        <template #jobName="scope">
          <span>
            {{ Dict.jobNameBizDict.getValue(scope.data.row.jobName) }}
          </span>
        </template>
        <!-- 开始时间 -->
        <template #startDate="scope">
          <span>
            {{
              proxy.$moment.formatDate(
                scope.data.row.startDate,
                "YYYY-MM-DD HH:mm:ss",
              )
            }}
          </span>
        </template>
        <!-- 结束时间 -->
        <template #endDate="scope">
          <span>
            {{
              proxy.$moment.formatDate(
                scope.data.row.endDate,
                "YYYY-MM-DD HH:mm:ss",
              )
            }}
          </span>
        </template>
        <!-- 执行时间 -->
        <template #executeTime="scope">
          <span>
            {{ executeTimeEvent(scope.data.row) }}
          </span>
        </template>

        <!-- 状态 -->
        <template #state="scope">
          <span>
            {{ Dict.recordStateDict.getValue(scope.data.row.state) }}
          </span>
        </template>

        <template #operation="scope">
          <!-- 错误信息 -->
          <span
            class="el-button-color"
            @click="handleInfo(scope.data.row)"
            v-if="scope.data.row.state === false"
          >
            {{ $t("jobRecord.errorMsg") }}
          </span>
        </template>
      </jmash-table>
      <template #footer>
        <jmash-pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:current-page="queryParams.curPage"
          v-model:page-size="queryParams.pageSize"
          @pagination="tableHooks.getList()"
        />
      </template>
    </el-card>
    <!-- 表格结束 -->
    <!-- 错误信息弹窗 -->
    <error-message-info
      v-if="errorMsgDialog.visible"
      v-model="errorMsgDialog.visible"
      :title="$t('jobRecord.errorMsg')"
      :errorMsg-key="errorMsgKey"
      width="600px"
    />
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, type Ref, ref } from "vue";
import {
  type TableColumn,
  type TableSort,
  type DialogRef,
  useTableHooks,
} from "jmash-core";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import type { JobRecordReq, JobRecordModel } from "@/api/jobs/job-record/types";
import { jobRecordApi } from "@/api/jobs/job-record/index";
import errorMessageInfo from "@/views/jobs/job-record/errorMsg.vue";
import { Dict } from "@/api/jobs/index";
//任务名称
Dict.jobNameBizDict.useValues();
const { proxy } = getCurrentInstance() as any;
const queryParams = ref<JobRecordReq>({});
const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, jobRecordApi, queryParams);
// 表格列
let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "jobRecord.jobName",
    prop: "jobName",
    sortable: "custom",
    isColumn: true,
    slotName: "jobName",
    columnType: "slot",
  },
  {
    label: "jobRecord.startDate",
    prop: "startDate",
    sortable: "custom",
    isColumn: true,
    slotName: "startDate",
    columnType: "slot",
    width: "180",
  },
  {
    label: "jobRecord.endDate",
    prop: "endDate",
    sortable: "custom",
    isColumn: true,
    slotName: "endDate",
    columnType: "slot",
    width: "180",
  },
  {
    label: "jobRecord.executeTime",
    prop: "executeTime",
    isColumn: true,
    slotName: "executeTime",
    columnType: "slot",
    width: "100",
  },
  {
    label: "jobRecord.state",
    prop: "state",
    sortable: "custom",
    isColumn: true,
    slotName: "state",
    columnType: "slot",
    width: "90",
  },
  {
    label: "common.operate",
    width: "90",
    slotName: "operation",
    columnType: "slot",
    fixed: "right",
    isColumn: true,
  },
]);

// 错误信息弹窗
const errorMsgDialog = ref({
  title: t("jobRecord.errorMsg"),
  visible: false,
} as DialogRef);
const errorMsgKey = ref<string>();
function handleInfo(row: JobRecordModel) {
  errorMsgKey.value = row.errorMsg;
  errorMsgDialog.value.visible = true;
}
//行选择
function tableSelected(value: JobRecordModel[]) {
  tableHooks.selectionRows.value = value;
}

//处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

// 时间格式化
function dateEvents(value: string) {
  queryParams.value.startDate = proxy.$moment.formatDate(value);
}
//执行时间(单位秒)
function executeTimeEvent(value: JobRecordModel) {
  if (value) {
    const date1 = new Date(value.endDate as string).getTime();
    const date2 = new Date(value.startDate as string).getTime();
    const diffTime = Math.abs(date1 - date2);
    const diffSeconds = diffTime / 1000;
    return diffSeconds;
  }
}

//查询数据.
tableHooks.getList();
</script>
